<template>
    <template v-for="(v,k) in state.btns" :key="k">
        <el-button class="ml45 margins" :type="v.type" @click="v.click">
            <SvgIcon v-if="v.icon" :name="v.icon"/>
            {{v.text}}
        </el-button>
    </template>
</template>

<script setup lang="ts">
    import {
        onMounted,
        reactive,
        watch,
        defineProps,
        getCurrentInstance
    } from "vue";
    import {getAuthBtnByPath} from "/@/api/menu";

    const {proxy} = getCurrentInstance() as any;
    const props = withDefaults(defineProps<Props>(), {
        buttons: new Array<Button>()
    })
    const state = reactive({
        cardStyle: {padding: '10px'},
        authBtnList: [],
        authBtnObj: {},
        btns: []
    })

    interface Props {
        buttons: Array<Button>,
    }

    interface Button {
        code: String,
        text: String,
        icon: String,
        click: Function,
        type: String
    }

    const getBtnDataFromSession = () => {
        let url = window.location.hash;
        let urls1 = url.slice(1);
        let params = urls1;
        if (urls1.indexOf("?") != -1) {
            params = urls1.split("?")[0];
        }
        getAuthBtnByPath(params).then((res) => {
            state.authBtnObj = res.data.menuButtonList;
            if (proxy.$wigem.isEmpty(state.authBtnObj)) {
                return;
            }
            //将没有权限使用的按钮过滤掉
            screeningBtnList();
        });
    }
    const screeningBtnList = () => {
        let btnObj = state.authBtnObj;
        let btnList = [];
        for (let key in btnObj) {
            props.buttons.map((b) => {
                if (key == b.code) {
                    btnList.push(b)
                }
            })
        }
        state.btns = btnList;
    }
    const init = () => {
        //获取按钮权限的数据
        getBtnDataFromSession();
    }

    onMounted(() => {
        init();
    })
    watch(
        () => props.buttons,
        (n, o) => {
            init();
        }
    )
</script>
<style lang="scss" scoped>
    .margins {
        margin-left: 10px;
    }
</style>